<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap Slider</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css" />
    <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
	<link rel="stylesheet" href="css/bootstrap-slider.css" />
</head>
<body>
	<div id="wrap"></div>
	<!-- <input
    type="text"
    name="somename"
    data-provide="slider"
    data-slider-ticks="[1, 2, 3]"
    data-slider-ticks-labels='["short", "medium", "long"]'
    data-slider-min="1"
    data-slider-max="3"
    data-slider-step="1"
    data-slider-value="3"
    data-slider-tooltip="hide"
> -->
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/bootstrap-slider.js"></script>

<script>
$(function () {
	var str = '\
		<input\
		    type="text"\
		    name="somename"\
		    data-provide="slider"\
		    data-slider-ticks="[1, 2, 3]"\
		    data-slider-ticks-labels=\'["short", "medium", "long"]\'\
		    data-slider-min="1"\
		    data-slider-max="3"\
		    data-slider-step="1"\
		    data-slider-value="3"\
		    data-slider-tooltip="hide"\
		>\
	';
	$('#wrap').append(str);
	
	/* var mySlider = $("input").slider();
	console.log(mySlider.slider('getValue'));
	mySlider.slider('setValue', 1).slider('setValue', 2); */
	console.log($("input").slider().slider('setValue', 2).slider('getValue'));
	
});
</script>
</body>
</html>
